<script type="text/javascript">   
    var chart = null,options=null;
    $(document).ready(function() {       
        options ={
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Grafik Penjualan '+<?= $tahun ?>
            },
            subtitle: {
                text: 'All Retail KitaMart'
            },
            xAxis: {
                categories: [<?= $bulan; ?>]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rupiah Penjualan'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y ;
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                    name: 'All Retail',
                    data: [<?= $total; ?>]
    
                }]
        }
        chart = new Highcharts.Chart(options);
        
        $('#hari').click(function(){
            $.ajax({
                type:'POST',
                data:'bulan='+$('select[name="bulan"]').val()+'&tahun='+$('select[name="tahun"]').val(),
                url:'<?= base_url() . 'transaksi/get_per_hari/' ?>',
                success:function(r){
                    var obj = jQuery.parseJSON(r);
                    options ={
                        chart: {
                            renderTo: 'container',
                            type: 'column'
                        },
                        title: {
                            text: 'Grafik Penjualan 2013'
                        },
                        subtitle: {
                            text: 'All Retail KitaMart'
                        },
                        xAxis: {
                            categories: obj.bulan
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Rupiah Penjualan'
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            backgroundColor: '#FFFFFF',
                            align: 'left',
                            verticalAlign: 'top',
                            x: 100,
                            y: 70,
                            floating: true,
                            shadow: true
                        },
                        tooltip: {
                            formatter: function() {
                                return ''+
                                    this.x +': '+ this.y ;
                            }
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: [{
                                name: 'All Retail',
                                data: obj.total
                            }]
                    }
                    chart = new Highcharts.Chart(options);
                }
            });            
            
        });
        
        setInterval(function(){
            $.ajax({
                type:'POST',
                data:'bulan='+$('select[name="bulan"]').val()+'&tahun='+$('select[name="tahun"]').val(),
                url:'<?= base_url() . 'transaksi/get_per_hari/' ?>',
                success:function(r){
                    var obj = jQuery.parseJSON(r);
                    options ={
                        chart: {
                            renderTo: 'container',
                            type: 'column'
                        },
                        title: {
                            text: 'Grafik Penjualan 2013'
                        },
                        subtitle: {
                            text: 'All Retail KitaMart'
                        },
                        xAxis: {
                            categories: obj.bulan
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Rupiah Penjualan'
                            }
                        },
                        tooltip: {
                            formatter: function() {
                                return ''+
                                    this.x +': '+ this.y ;
                            }
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: [{
                                name: 'All Retail',
                                data: obj.total
                            }]
                    }
                    chart = new Highcharts.Chart(options);
                }
            });     
        }, 5000);
    });
    
</script>
<h1>Transaksi</h1>
<div id="res"></div>
<div id="view">
    <a href="#" id="hari" class="active">Per Hari</a>
    <a href="#" id="bulan">Per Bulan</a>
    <a href="#" id="tahun">Per Tahun</a>
</div>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<label>Bulan : </label>
<select name="bulan">
    <?php
    $arr_month = array();
    $i = 1;
    for ($i = 1; $i <= 12; $i++) {
        ?>
        <option value="<?= $i; ?>"><?= $newDate; ?></option>
        <?php
    }
    ?>
</select>
<label>Tahun : </label>
<select name="tahun">
    <?php
    $tahun = date('Y');
    $i = $tahun;
    $x = $tahun + 10;
    for ($i = $tahun; $i <= $x; $i++) {
        ?>
        <option value="<?= $i; ?>"><?= $i; ?></option>
        <?php
    }
    ?>
</select>